<template>
  <div>
    <Header></Header>

    <div class="mblog">
      <h3 class="title"> {{ blog.title }}</h3>
      <el-link type="primary" icon="el-icon-edit" v-if="ownBlog">
        <router-link  :to="{name: 'BlogEdit', params: {blogId: blog.id}}" >
        编辑
        </router-link>
      </el-link>
      <el-link class="btnDelete" v-if="ownBlog" @click="deleteBtn" type="danger"><i class="el-icon-delete"></i>删除</el-link>
      <el-divider></el-divider>
      <div class="markdown-body" v-html="blog.content"></div>

    </div>

  </div>
</template>

<script>
  import 'github-markdown-css'
  import Header from "../components/Header";

  export default {
    name: "BlogDetail.vue",
    components: {Header},
    data() {
      return {
        blog: {
          id: "",
          title: "",
          content: ""
        },
        ownBlog: false
      }
    },
    methods: {
      deleteBtn() {
        let _this = this;
        this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.deleteBlog();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      deleteBlog() {
        this.$axios.get("/api/blog/delete", {
          params: {id: this.blog.id},
          headers: {
            "Authorization": localStorage.getItem("token")
          }
        }).then(res => {
          this.$router.push("/")
        })
      }
    }
    ,
    created() {
      const blogId = this.$route.params.blogId
      const _this = this
      this.$axios.get('/api/blog/' + blogId).then(res => {
        const blog = res.data.data
        _this.blog.id = blog.id
        _this.blog.title = blog.title

        var MardownIt = require("markdown-it")
        var md = new MardownIt()

        var result = md.render(blog.content)
        _this.blog.content = result
        _this.ownBlog = (blog.userId === _this.$store.state.userInfo.id)

      })
    }
  }
</script>

<style scoped>
  .title {
    font-size: 32px;
    font-weight: bolder;
  }
  .mblog {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    width: 100%;
    min-height: 700px;
    padding: 20px 15px;
  }
  .btnDelete {
    margin-left: 10px;
  }

</style>